<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">人员管理</h2>
    <button class="btn" @click="addCustom(1)">新增</button>
  </header>
  <div class="page">
    <div class="displayflex top-bar-w">
      <div class="top-bar-c flex1">
        <i class="iconfont icon-sech"></i>
        <div class="ipt"><input type="text" placeholder="输入人员名称" v-model="name"></div>
      </div>
      <div class="btn-sech" @click="resetGet()">搜索</div>
    </div>

    <tab :line-width='2' class="lltab">
      <tab-item :selected="selectedNum=='1'" @on-item-click="goLink(1)">全部</tab-item>
      <tab-item :selected="selectedNum=='2'" @on-item-click="goLink(2)">仓管员</tab-item>
      <tab-item :selected="selectedNum=='3'" @on-item-click="goLink(3)">收货员</tab-item>
    </tab>

    <scroller lock-x height="-159" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-if="todolist.length>0">
    <div>
      <div class="custom-wrap">
        <div class="custom-box displayflex" v-for="item in todolist" @click="addCustom(2,item)">
          <div class="pic" v-if="item.PictContent && item.PictContent!='null'">
            <img :src="item.PictContent | simpleImgUrl2">
          </div>
          <div class="pic" v-else><img src="~images/icon/people.png"></div>
          <div class="flex1 txt">
            <p class="name">{{item.Name || "未命名"}}</p>
            <p>{{item.MobileNo}}</p>
          </div>
        </div>
      </div>
    </div>
    <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
    </scroller>
    <div class="noDate_page" v-if="todolist.length==0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
  <div class="btn-bottom"><div class="btn" @click="addCustom(1)">新增</div></div>
</div>
</template>

<script>
export default {
  data(){
    return{
      name:'',
      todolist:[],
      count: 0,
      pageindex: 1,
      totalLength: 0,
      showLoad:false,
      query:{},
      selectedNum:1,
    }
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  watch:{
    name(val){
      if (!val) {
        this.resetGet();
      }
    }
  },
  created(){
    this.getdata();
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    resetGet() {
      this.todolist = [];
      this.count = 0;
      this.pageindex = 1;
      this.getdata();
    },
    addCustom(type,value){
      if(value){
        sessionStorage.userscustomItem = JSON.stringify(value);
      }
      if(type == 1)
      {
        this.checkCorpInfo(type);
      }
      else
      {
        this.gotoDetail(type);
      }
    },
    gotoDetail(type){
      this.$router.push({
        path:'/user/addCustom',
        query:{
          type:type
        }
      });
    },
    checkCorpInfo(type){
      var _this = this;
      _this.showLoad = true;
      var query = {
        StaffID: this.userinfo.StaffID,
      };
      this.Ajax.post("CheckCorpInfo", query).then(function(resp) {
        _this.showLoad = false;
        if(!resp.IsSuccess) {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        } 
        else
        {
          _this.gotoDetail(type);
        }
      });
    },
    goLink(type) {
      this.todolist = [];
      this.query = {};
      this.selectedNum = type;
      if (type == "2") {
        this.query.UserBizType = "warehouse";
      } else if (type == "3") {
        this.query.UserBizType = "Cargoreceiver";
      };
      this.resetGet();
    },
    getdata(){
      var self = this;
      if ( this.totalLength == this.todolist.length && this.todolist.length > 0)
      {
        return false;
      }
      this.showLoad = true;
      this.query.StaffID = this.userinfo.StaffID;
      this.query.CorpGuid = this.userinfo.CorpGuid;
      this.query.PageSize = 10;
      this.query.PageIndex = this.pageindex;
      this.query.Name = this.name;
      this.Ajax.post("SearchCustomer", this.query).then(function(resp) {
      
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if (result.length > 0) {
            self.todolist = self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          };
          self.totalLength = resp.TotalRecords;
          if (self.pageindex == 2) {
            self.$nextTick(() => {
              if(self.$refs.scrollerBottom.scrollBottomOffset>0){
                self.$refs.scrollerBottom.reset({
                  top: 0
                });
              }
            });
          }
        }
      });
    },
    onScrollBottom(){
      this.count++;
      if (this.count == 1) {
        this.getdata();
      };
    }
  }
}
</script>